import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux'
import {addOrder, addUser, setName, setOrderId} from '../store/actions'
import './Widget.css';

let AddTodo = ({dispatch}) => {
    return (<div>
        <div>
            <button onClick={() => {
                dispatch(addUser({
                    name: 'adam',
                    gender: 1,
                    age: 20
                }))
            }}>AddUser</button>
        </div>
        <div>
            <button onClick={() => {
                dispatch(setName('james'))
            }}>SetUser</button>
        </div>
        <div>
            <button onClick={() => {
                dispatch(addOrder({
                    orderId: 9,
                    orderName: 'world'
                }))
            }}>AddOrder</button>
        </div>
        <div>
            <button onClick={() => {
                dispatch(setOrderId(8))
            }}>setOrderId</button>
        </div>
    </div>);
};
AddTodo = connect()(AddTodo);

const mapStateToProps = (state) => {
    return {
        user: state.storeUser.user
    }
};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        // increment: (...args) => dispatch(actions.increment(...args)),
        // decrement: (...args) => dispatch(actions.decrement(...args))
    }
};

class Widget extends Component {

    hello = 'hello';
    timerId = null;

    constructor(props) {
        super(props);
        this.state = {
            date: new Date().toLocaleString(),
            counter: 0,
            increment: 1
        };
        this.widget_info = {
            title: 'super tile',
            content: 'widget content'
        };
        this.hello = 'what is your name';
        this.onButtonClick = this.onButtonClick.bind(this);
        this.onForward = this.onForward.bind(this);
    }

    componentDidMount() {
        console.log('componentDidMount');
        this.timerId = setInterval(() => {
            this.setState({
                date: new Date().toLocaleString()
            });
        }, 1000);
    }

    componentWillUnmount() {
        console.log('componentWillUnmount');
        clearInterval(this.timerId);
    }

    onButtonClick(event) {
        console.log('onButtonClick:', this.props.value);
        this.setState((prevState, props) => ({
            counter: prevState.counter + props.value
        }));
    }

    onForward(arg1, event) {
        console.log('onForward:', arg1);
        this.props.history.push(arg1);
        event.preventDefault();
    }

    render() {
        return (
            <div>
                <div className="wg-title">{this.hello}</div>
                <div className="wg-content">{`${this.widget_info.content}: ${this.state.counter}`}</div>
                <div className="wg-date">{this.state.date}</div>
                <div>
                    <button onClick={this.onButtonClick}>第一个按钮</button>
                </div>
                <div>
                    <button onClick={this.onForward.bind(this, '/new-page')}>跳转</button>
                </div>
                <button onClick={() => {
                    this.props.dispatch(addUser({
                        name: 'adam',
                        gender: 1,
                        age: 20
                    }))
                }}>AddUser</button>
                {/*<AddTodo/>*/}
                {/*<button><Link to={'/new-page'}>跳转</Link></button>*/}
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Widget);